<template>
    <el-dialog
            :title="title"
            :visible.sync="dialogVisible"
            width="80%"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :before-close="beforeClose">
        <div>
            <el-form :rules="rules" :model="emp"  ref="empForm">

                <el-row>
                    <el-col :span="6">
                        <el-form-item label="姓名:" prop="name">
                            <el-input prefix-icon="el-icon-edit" v-model="emp.name" placeholder="员工姓名" style="width:150px" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="性别:" prop="gender">
                            <el-radio-group v-model="emp.gender">
                                <el-radio label="男"></el-radio>
                                <el-radio label="女"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="出生日期:" prop="birthday">
                            <el-date-picker type="date"
                                            placeholder="选择日期" v-model="emp.birthday" style="width: 150px;" value-format="yyyy-MM-dd"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="政治面貌:" prop="politicId">
                            <el-select v-model="emp.politicId" placeholder="政治面貌" style="width: 200px;">
                                <el-option :label="politicsstatus.name" :value="politicsstatus.id" v-for="politicsstatus in getAllPoliticsstatus" :key="politicsstatus.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="民族:" prop="nationId">
                            <el-select v-model="emp.nationId" placeholder="民族" style="width: 150px;">
                                <el-option :label="nation.name" :value="nation.id" v-for="nation in getAllNation" :key="nation.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="籍贯:" prop="nativePlace">
                            <el-input prefix-icon="el-icon-edit" v-model="emp.nativePlace" placeholder="员工籍贯" style="width:150px" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="地址邮箱:" prop="email">
                            <el-input prefix-icon="el-icon-message" v-model="emp.email" placeholder="邮箱" style="width:150px" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="联系地址:" prop="address">
                            <el-input prefix-icon="el-icon-edit" v-model="emp.address" placeholder="联系地址" style="width:200px" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="6">
                        <el-form-item label="职位:" prop="posId">
                            <el-select v-model="emp.posId" placeholder="职位" style="width: 150px;">
                                <el-option :label="position.name" :value="position.id" v-for="position in getAllPosition" :key="position.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="职称:" prop="jobLevelId">
                            <el-select v-model="emp.jobLevelId" placeholder="职称" style="width: 150px;">
                                <el-option :label="job.name" :value="job.id" v-for="job in getAllJob" :key="job.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="所属部门:" prop="departmentId">
                            <el-popover
                                    placement="right"
                                    title="请选择部门"
                                    width="200"
                                    trigger="manual"
                                    v-model="popVisible">
                                <el-tree :data="allDeps" :props="defaultProps" @node-click="handleNodeClick" :default-expand-all="true"></el-tree>
                                <div slot="reference" class="dep" @click="showDepView">{{inputDepName}}</div>
                            </el-popover>

                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="电话号码:" prop="phone">
                            <el-input prefix-icon="el-icon-phone" v-model="emp.phone" placeholder="电话号码" style="width:200px" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="6">
                        <el-form-item label="工号:" prop="workID">
                            <el-input prefix-icon="el-icon-message" v-model="emp.workID" placeholder="工号" style="width:150px" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="学历:" prop="tiptopDegree">
                            <el-select v-model="emp.tiptopDegree" placeholder="学历" style="width: 150px;">
                                <el-option :label="education" :value="education" v-for="education in educations"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="毕业院校:" prop="school">
                            <el-input prefix-icon="el-icon-edit" v-model="emp.school" placeholder="毕业院校名称" style="width:150px" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="专业名称:" prop="specialty">
                            <el-input prefix-icon="el-icon-edit" v-model="emp.specialty" placeholder="专业名称" style="width:200px" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="6">
                        <el-form-item label="入职日期:" prop="beginDate">
                            <el-date-picker type="date" placeholder="入职日期" v-model="emp.beginDate" style="width: 170px;"
                                            value-format="yyyy-MM-dd"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="转正日期:" prop="conversionTime">
                            <el-date-picker type="date" placeholder="转正日期" v-model="emp.conversionTime" style="width: 170px;"
                                            value-format="yyyy-MM-dd"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="合同起始日期:" prop="beginContract">
                            <el-date-picker type="date" placeholder="合同起始日期" v-model="emp.beginContract" style="width: 170px;"
                                            value-format="yyyy-MM-dd"></el-date-picker>                            </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="合同终止日期:" prop="endContract">
                            <el-date-picker type="date" placeholder="合同终止日期" v-model="emp.endContract" style="width: 170px;"
                                            value-format="yyyy-MM-dd"></el-date-picker>                            </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="身份证号码:" prop="idCard">
                            <el-input prefix-icon="el-icon-edit" v-model="emp.idCard" placeholder="身份证号码" style="width:200px" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="聘用形式:" prop="engageForm">
                            <el-radio-group v-model="emp.engageForm">
                                <el-radio label="劳动合同"></el-radio>
                                <el-radio label="劳务合同"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="婚姻状况:" prop="wedlock">
                            <el-radio-group v-model="emp.wedlock">
                                <el-radio label="已婚"></el-radio>
                                <el-radio label="未婚"></el-radio>
                                <el-radio label="离异"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
            <span slot="footer" class="dialog-footer">
    <el-button @click="closeDialog">取 消</el-button>
    <el-button type="primary" @click="doAddEmp">确 定</el-button>
  </span>
    </el-dialog>

</template>

<script>
    export default {
        name: "Basic",
        //接收父组件的值
        props:{
            dialogVisible:{
                type:Boolean
             },
            title:{
                type:String
            },
            emp:{
                type:Object
            },
            inputDepName:{
                type:String
            }
        },
        data(){
            return {
                allDeps:[],
                getAllNation:[],
                getAllPoliticsstatus:[],
                getAllJob:[],
                getAllPosition:[],
                educations:['本科','大专','硕士','博士','高中','小学','初中','其他'],
                popVisible:false,
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },

                rules:{
                    name:[ { required: true, message: '请输入员工名称', trigger: 'blur' },
                            { min: 2, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],
                    gender:[ { required: true, message: '请选择性别', trigger: 'blur' }],
                    birthday:[ { required: true, message: '请选择出生日期', trigger: 'blur' }],
                    idCard:[ { required: true, message: '请输入身份证号码', trigger: 'blur' }, {
                        pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
                        message: '身份证号码格式不正确',
                        trigger: 'blur'
                    }],
                    wedlock:[ { required: true, message: '请输入婚姻状况', trigger: 'blur' }],
                    nationId:[ { required: true, message: '请选择民族', trigger: 'blur' }],
                    nativePlace:[ { required: true, message: '请输入籍贯', trigger: 'blur' }],
                    politicId:[ { required: true, message: '请选择政治面貌', trigger: 'blur' }],
                    email:[ { required: true, message: '请输入邮箱', trigger: 'blur' },{type:'email',message:'邮箱格式有误',trigger:'blur'}],
                    phone:[ { required: true, message: '请输入手机号码', trigger: 'blur' }],
                    address:[ { required: true, message: '请输入地址', trigger: 'blur' }],
                    departmentId:[ { required: true, message: '请选择部门', trigger: 'blur' }],
                    jobLevelId:[ { required: true, message: '请选择职称', trigger: 'blur' }],
                    posId:[ { required: true, message: '请选择职位', trigger: 'blur' }],
                    workID:[ { required: true, message: '请选择工号', trigger: 'blur' }],
                    engageForm:[ { required: true, message: '请选择聘用形式', trigger: 'blur' }],
                    tiptopDegree:[ { required: true, message: '请选择学历', trigger: 'blur' }],
                    specialty:[ { required: true, message: '请输入专业', trigger: 'blur' }],
                    school:[ { required: true, message: '请输入毕业院校', trigger: 'blur' }],
                    beginDate:[ { required: true, message: '请选择入职日期', trigger: 'blur' }],
                    workState:[ { required: true, message: '请输入工作状态', trigger: 'blur' }],
                    contractTerm:[ { required: true, message: '请输入合同期限', trigger: 'blur' }],
                    conversionTime:[ { required: true, message: '请选择转正日期', trigger: 'blur' }],
                    notWorkDate:[ { required: true, message: '请选择离职日期', trigger: 'blur' }],
                    beginContract:[ { required: true, message: '请选择合同起始日期', trigger: 'blur' }],
                    endContract:[ { required: true, message: '请输入合同结束日期', trigger: 'blur' }],
                }
            }
        },
        mounted(){
            this.initData();
        },
        methods:{
            beforeClose(){
               this.closeDialog();
            },
            //向父组件传值
            closeDialog(){
                this.popVisible = false;
                this.$emit('closeDialogEvent',false);
            },
            //根据是否有id，来判断是添加还是修改
            doAddEmp(){
                if(this.emp.id){
                    //修改
                    this.$refs['empForm'].validate((valid)=>{
                        if(valid){
                            this.putRequest('/api/employee/basic/',this.emp).then(resp=>{
                                if(resp){
                                    this.popVisible = false;
                                    this.$emit('closeDialogEvent','success');
                                }
                            })
                        }
                    })
                }else{
                    //添加
                    this.$refs['empForm'].validate((valid)=>{
                        if(valid){
                            this.postRequest('/api/employee/basic/',this.emp).then(resp=>{
                                if(resp){
                                    this.popVisible = false;
                                    this.$emit('closeDialogEvent','success');
                                }
                            })
                        }
                    })
                }

            },
            handleNodeClick(data){
                console.log(data);
                this.emp.departmentId = data.id;
                this.$emit('editinputDepName',data.name);
                this.popVisible = !this.popVisible;
            },
            initData(){
                let nation = window.sessionStorage.getItem("nation");
                let politicsstatus = window.sessionStorage.getItem("politicsstatus");

                //获得所有民族
                if(!nation){
                    this.getRequest('/api/employee/basic/getAllNation').then(resp=>{
                        if(resp){
                            this.getAllNation = resp;
                            window.sessionStorage.setItem("nation",JSON.stringify(resp));
                        }
                    });
                }else{
                    this.getAllNation = JSON.parse(nation);
                }
                //获得所有政治面貌
                if(!politicsstatus){
                    this.getRequest('/api/employee/basic/getAllPoliticsstatus').then(resp=>{
                        if(resp){
                            this.getAllPoliticsstatus = resp;
                            window.sessionStorage.setItem("politicsstatus",JSON.stringify(resp));
                        }
                    });
                }else{
                    this.getAllPoliticsstatus = JSON.parse(politicsstatus);
                }
                //获得所有职称
                this.getRequest('/api/employee/basic/getAllJob').then(resp=>{
                    if(resp){
                        this.getAllJob = resp;
                    }
                });
                //获得所有职位
                this.getRequest('/api/employee/basic/getAllPosition').then(resp=>{
                    if(resp){
                        this.getAllPosition = resp;
                    }
                });
            },
            //点击部门
        showDepView(){
               this.popVisible = !this.popVisible;
               this.getRequest('/api/employee/basic/allDeps').then(resp=>{
                   if(resp){
                       this.allDeps = resp;
                   }
               })
         },
            //获得最大的工号
            maxWordID(){
                this.getRequest('/api/employee/basic/maxWordID').then(resp=>{
                    if(resp){
                        this.emp.workID = resp.obj;
                    }
                })
            }
        }
    }
</script>

<style>
.dep{
    width: 150px;
    display: inline-flex;
    font-size: 13px;
    border: 1px solid #dedede;
    height: 30px;
    border-radius: 5px;
    cursor: pointer;
    align-items: center;
    padding-left: 10px;
    box-sizing: border-box;
}
</style>